<template>
  <router-view/>
  <van-tabbar route v-model="active">
    <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item to="/category" icon="apps-o">分类</van-tabbar-item>
    <van-tabbar-item to="/shopcart" icon="shopping-cart-o">购物车</van-tabbar-item>
    <van-tabbar-item to="/profile" icon="contact">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import {  computed } from '@vue/reactivity'
import { useRoute } from "vue-router";

export default ({
  setup() {
    const route = useRoute()
    let active = computed(() => {
      if(route.path === '/') {
        return 0
      } else if(route.path === '/category') {
        return 1
      } else if (route.path === '/shopcart') {
        return 2
      } else {
        return 3
      }
    })
    return {
      active
    }
  },
})
</script>


<style lang="scss">
@import 'assets/css/base.css';
</style>
